<template>
<div class="control-section">
    <div class="drop-down-section">
        <div id="drop-down-control">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                    <ejs-dropdownbutton iconCss="e-ddb-icons e-profile" :items="items"></ejs-dropdownbutton>
                </div>
                <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                    <ejs-dropdownbutton :items="items">Profile</ejs-dropdownbutton>
                </div>
                <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                    <ejs-dropdownbutton :items="items" iconCss="e-ddb-icons e-profile">Profile</ejs-dropdownbutton>
                </div>
                <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                    <ejs-dropdownbutton :items="items" cssClass="e-caret-hide">Profile</ejs-dropdownbutton>
                </div>
            </div>
        </div>
    </div>
    <div id="action-description">
    <p>This sample demonstrates the default functionalities of the DropDownMenu.
        Clicking DropDownMenu will display popup with list of action items.</p>
</div>
<div id="description">
    <p>
        The DropDownMenu component is used to toggle contextual overlays for displaying list of action items.
        It can contain both text and images.
    </p>
    <p>
        In this sample, DropDownMenu contains icon, content and list of action items, and can be added using
        <code>
            <a target="_blank" class="code" href="https://ej2.syncfusion.com/vue/documentation/api/drop-down-button#iconcss">iconCss,
            </a>
        </code>
        <code>
            <a target="_blank" class="code" href="https://ej2.syncfusion.com/vue/documentation/api/drop-down-button#content">content
            </a>
        </code>and
        <code>
            <a target="_blank" class="code" href="https://ej2.syncfusion.com/vue/documentation/api/drop-down-button/#items">items
            </a>
        </code>property.
    </p>
    <p>
        More information about DropDownMenu can be found in this
        <a target="_blank" href="https://ej2.syncfusion.com/vue/documentation/drop-down-button/getting-started">
            documentation section</a>.
    </p>
</div>
</div>
</template>

<style>
/* custom code start */
#drop-down-control {
  width: 100%;
  margin: 11% 0;
  text-align: center;
}

.drop-down-section {
  width: 80%;
  margin: auto;
}

#drop-down-control .col-xs-12 {
  margin: 15px 0;
}

@media only screen and (max-width: 500px) {
  #drop-down-control .col-lg-6 {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 1200px) {
  #drop-down-control .col-lg-6 {
    width: 25%;
  }
}
/* custom code end */
@font-face {
  font-family: "e-ddb-icons";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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b3Bkb3duX21ldHJvcEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAARAByAG8AcABkAG8AdwBuAF8AbQBlAHQAcgBvAHAAUgBlAGcAdQBsAGEAcgBEAHIAbwBwAGQAbwB3AG4AXwBtAGUAdAByAG8AcABEAHIAbwBwAGQAbwB3AG4AXwBtAGUAdAByAG8AcABWAGUAcgBzAGkAbwBuACAAMQAuADAARAByAG8AcABkAG8AdwBuAF8AbQBlAHQAcgBvAHAARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAAESW5mbw1Vc2VyX3NldHRpbmdzBkxvZ291dAdQcm9maWxlCURhc2hib2FyZA9NX1VzZXJfc2V0dGluZ3MITV9Mb2dvdXQGTV9JbmZvC01fRGFzaGJvYXJkC0Rhc2hib2FyZEI0DU5vdGlmaWNhdGlvbnMEVXNlcghTZXR0aW5ncwZMb2dPdXQAAAAA) format('truetype');
  font-weight: normal;
  font-style: normal;
}

.e-ddb-icons {
  font-family: "e-ddb-icons";
  speak: none;
  font-size: 55px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.e-logout::before {
  content: "\e702";
}

.e-dashboard::before {
  content: "\e704";
}

.e-profile::before {
  content: "\e703";
}

.e-notifications::before {
  content: "\e700";
}

.e-settings::before {
  content: "\e701";
}

.material .e-logout::before,
.bootstrap .e-logout::before {
  content: "\e706";
}

.material .e-dashboard::before,
.bootstrap .e-dashboard::before {
  content: "\e708";
}

.material .e-profile::before,
.bootstrap .e-profile::before,
.bootstrap4 .e-profile::before {
  content: "\e811";
}

.material .e-notifications::before,
.bootstrap .e-notifications::before {
  content: "\e707";
}

.material .e-settings::before,
.bootstrap .e-settings::before {
  content: "\e705";
}

.bootstrap4 .e-logout::before {
  content: "\e816";
}

.bootstrap4 .e-dashboard::before {
    content: "\e80f";
}

.bootstrap4 .e-notifications::before {
  content: "\e810";
}

.bootstrap4 .e-settings::before {
  content: "\e815";
}
</style>

<script>
import Vue from "vue";
import { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";

Vue.use(DropDownButtonPlugin);

export default Vue.extend({
  data: function() {
    return {
      items: [
        {
          text: "Dashboard",
          iconCss: "e-ddb-icons e-dashboard"
        },
        {
          text: "Notifications",
          iconCss: "e-ddb-icons e-notifications"
        },
        {
          text: "User Settings",
          iconCss: "e-ddb-icons e-settings"
        },
        {
          text: "Log Out",
          iconCss: "e-ddb-icons e-logout"
        }
      ]
    };
  }
});
</script>